<template>
  <ul class="row">
    <template v-for="(value, key) in formData">
      <li :key="key" v-if="/MID/i.test(key)">
        <select-merchantid v-model="formData[key]"></select-merchantid>
      </li>
      <li :key="key" v-else-if="/sid|ServiceID/i.test(key)">
        <select-id
          v-model="formData[key]"
          label-key="ServiceName"
          apiName="/api/Common/GetServiceProviderList"
          @change="onChange"
          size="mini"
        ></select-id>
      </li>
      <li :key="key" v-else-if="key === 'BeginDate'">
        <!-- <select-date v-model="formData[key]"></select-date> -->
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="dateChange"
          size="mini"
        >
        </el-date-picker>
      </li>
      <li :key="key" v-else-if="key == 'RechargeStatus'">
        <el-select
          v-model="model[key]"
          clearable
          @change="onChange"
          size="mini"
          :placeholder="`${$language.local('请选择')}${$language.local(key)}`"
        >
          <el-option label="待确认" value="1"></el-option>
          <el-option label="已确认待复核" value="2"></el-option>
          <el-option label="已复核" value="3"></el-option>
          <el-option label="无效充值" value="4"></el-option>
        </el-select>
      </li>
      <li :key="key" v-else-if="key == 'BusinesStatus'">
        <el-select v-model="formData.BusinesStatus" clearable>
          <el-option :label="$language.local('待处理')" value="W"></el-option>
          <el-option :label="$language.local('处理中')" value="C"></el-option>
          <el-option :label="$language.local('成功')" value="S"></el-option>
          <el-option :label="$language.local('失败')" value="F"></el-option>
        </el-select>
      </li>
      <li :key="key" v-else-if="/(Trade|query)YM/i.test(key)">
        <el-date-picker
          v-model="formData[key]"
          type="month"
          format="yyyy年MM月"
          value-format="yyyy年MM月"
          :placeholder="$language.local('选择月份')"
        >
        </el-date-picker>
      </li>
      <li :key="key" v-else-if="key == 'Status' || key == 'CheckStatus'">
        <el-select
          v-model="formData[key]"
          :placeholder="`请选择${$language.local(key)}`"
          clearable
          @change="onChange"
        >
          <el-option label="待审核" :value="-1"></el-option>
          <el-option label="审核通过" :value="1"></el-option>
          <el-option label="审核未通过" :value="2"></el-option>
        </el-select>
      </li>
      <li :key="key" v-else-if="key === 'auditStatus'">
        <el-select
          v-model="formData[key]"
          :placeholder="`请选择${$language.local(key)}`"
          clearable
          @change="onChange"
        >
          <el-option label="待认证" :value="-1"></el-option>
          <el-option label="已认证" :value="1"></el-option>
        </el-select>
      </li>
      <li :key="key" v-else-if="key === 'status'">
        <el-select
          v-model="formData[key]"
          :placeholder="`请选择${$language.local(key)}`"
          clearable
          @change="onChange"
        >
          <el-option label="待签约" :value="-1"></el-option>
          <el-option label="已签约" :value="1"></el-option>
        </el-select>
      </li>
      <li :key="key" v-else-if="key === 'Verify'">
        <el-select
          v-model="formData[key]"
          :placeholder="`请选择${$language.local(key)}`"
          clearable
          @change="onChange"
        >
          <el-option label="未验签" :value="-1"></el-option>
          <el-option label="已验签" :value="1"></el-option>
        </el-select>
      </li>
      <li :key="key" v-else-if="key == 'InvoiceBusinessStatus'">
        <el-select v-model="formData[key]" clearable>
          <el-option
            v-for="item in InvoiceBusinessStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </li>
      <!-- <li v-for="(value, key) in formData" :key="key">
        <xy-input
          size="mini"
          v-model="formData[key]"
          :placeholder="`${$language.local('请输入')}${$language.local(key)}`"
        ></xy-input>
      </li> -->
    </template>
  </ul>
</template>

<script>
export default {
  props: {
    model: Object,
  },
  data() {
    return {
      formData: this.model,
      InvoiceBusinessStatusOptions: [
        { label: "待审核", value: 0 },
        { label: "已申请", value: 1 },
        { label: "已通过待开票", value: 2 },
        { label: "已开票并邮寄", value: 3 },
        { label: "审核未通过", value: 4 },
        { label: "已取消", value: 5 },
      ],
      value1: "",
      value2: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    onChange() {},
    dateChange(e) {
      console.log(e);

      let temp = {
        ...this.formData,
        BeginDate: e[0],
        EndDate: e[1],
      };
      this.formData = temp;
      //  this.search();
    },
  },
};
</script>

<style lang="less" scoped>
.row {
  li + li {
    margin-left: 1rem;
  }
}
</style>
